<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>小米官网</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
      }
      .container {
        margin: 10px auto;
        width: 1226px;
        height: 460px;
        background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc1b92a726d8560b49ebe99103836b34.jpg?w=2452&h=920");
        background-size: 100% 100%;
      }
      .list {
        width: 234px;
        height: 460px;
        background: rgba(165, 163, 163, 0.9);
        float: left;
      }
      .list ul li {
        color: #f2f2f2;
      }

      .list ul li:hover {
        background-color: rgba(255, 103, 0);
      }
      .list ul li a {
        display: inline-block;
        text-decoration: none;
        color: white;
        width: 204px;
        padding-left: 30px;
        height: 42px;
        line-height: 42px;
      }
      .list ul {
        padding: 20px 0;
      }
      .right {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="list">
        <ul>
          <li><a href="#">手机</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">笔记本 平板</a></li>
          <li><a href="#">出行 穿戴</a></li>
          <li><a href="#">耳机 音箱</a></li>
          <li><a href="#">健康 儿童</a></li>
          <li><a href="#">生活 箱包</a></li>
          <li><a href="#">智能 路由器</a></li>
          <li><a href="#">电源 配件</a></li>
        </ul>
      </div>
      <div class="right">右侧盒子</div>
    </div>
  </body>
</html>
